<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>for...in...</title>
</head>
<body>
    <style>
        ul{
            list-style: none;
        }
        ul li{
            width: 100px;
            height: 50px;
            border: 1px solid #cccccc;
            margin-top: 10px;
        }
        
    </style>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
    // let hd = [
    //     {title:'第一章,走近javascript的黑洞',lession:3},
    //     {title:'ubuntu19.10 配置好用的编程工作站',lession:5},
    //     {title:'媒体查询响应式布局',lession:8}
    // ];

    // document.write(`
    //     <table border="1" width="100%">
    //     <thead><tr><th>标题</th><th>课程数</th></tr></thead>
    // `);
    // //遍历对象使用  for in
    // for(let key in hd){
    //     document.write(`
    //         <tr>
    //             <td>${hd[key].title}</td>
    //             <td>${hd[key].lession}</td>
    //         </tr>
    //     `);
    // }
    // document.write(`</table>`);

    //遍历对象操作
    // let info = {
    //     name:'后盾人',
    //     url:'houdunren.com'
    // };
    // for(const key in info){
    //     console.log(info[key])
    // }

    //遍历出window对象的所有属性
    // for(name in window){
    //     document.write(window[name])
    // }


    // let arr = [1,2,3];
    // for(const value of arr){
    //     console.log(value)
    // }


    //遍历字符串
    // let str = 'houdunren';
    // for(const value of str){
    //     console.log(value)
    // }

    //使用迭代特性遍历数组
    // const hd = ["hdcms","houdunren"];
    // for(const [key,value] of hd.entries()){
    //     console.log(key,value)
    // }

    //使用for/of 可以用来遍历DOM元素
    let lis = document.querySelectorAll("li");
    for(const li of lis){
        li.addEventListener("click",function(){
            this.style.backgroundColor = "red";
        });
    }






</script>
</html>